Sử dụng javascript làm game lật hình up giống nhau
11.146 lượt xem;
1 // for creating divs and shuffling blocks
2 var divblock, blockData, blockFrontImages, memoryBlockArr, blocksArray, blockFrontImagesAll, shuffledBlocks;
3 // for implementing flip n match logic
4 var currentlyFlippedArr, matchedCount, blockToMatch1, blockToMatch2;
5 // for implementing game info block
6 var flipCounter, timer, gameOn = false;
7
8 var overlays = Array.from(document.getElementsByClassName('overlay-text'));
9 overlays.forEach(overlay => {
10 overlay.addEventListener('click', () => {
11 overlay.classList.remove('visible');
12 resetGame();
13 init();
14
15 });
16 });
17
18 function startCountdown() {
19 return setInterval(() => {
20 this.timeRemaining--;
21 this.timer.innerText = this.timeRemaining;
22 if (this.timeRemaining === 0)
23 this.gameOver();
24 }, 1000);
25 }
26
27 function resetGame() {
28 var elements = document.getElementsByClassName("block");
29 while (elements.length > 0) {
30 elements[0].parentNode.removeChild(elements[0]);
31 }
32 }
33
34 function init() {
35 //initializing values
36 gameOn = true;
37 memoryBlockArr = new Array(18);
38 blocksArray = [];
39 blockFrontImagesAll = [];
40 shuffledBlocks = [];
41 currentlyFlippedArr = [];
42 matchedCount = 0;
43 flipCounter = 0;
44 var minutes = 2;
45 var display = document.getElementById("Timer");
46 blockFrontImages = ["Images/pokemon1.gif",
47 "Images/pokemon2.gif",
48 "Images/pokemon3.gif",
49 "Images/pokemon4.gif",
50 "Images/pokemon5.gif",
51 "Images/pokemon6.gif",
52 "Images/pokemon7.gif",
53 "Images/pokemon8.gif",
54 "Images/pokemon9.gif"];
55 // init();
56 startTimer(minutes, display);
57 blockFrontImagesAll = blockFrontImages.concat(blockFrontImages);
58 shuffledBlocks = shuffleBlocks(blockFrontImagesAll);
59 document.getElementById("Flips").innerText = `Flips: ${flipCounter}`;
60 createElements();
61 }
62
63
64
65 function createElements() {
66 var finalCount = shuffledBlocks.length;
67 for (var i = 0; i < finalCount; i++) {
68 var cardFront = shuffledBlocks.pop();
69 blockData = new MemoryBlock(i, cardFront, "Images/pokemonBack.jpg");
70 memoryBlockArr[i] = blockData;
71
72 divblock = document.createElement("div");
73 divblockFront = document.createElement("div");
74 divblockBack = document.createElement("div");
75 imgFront = document.createElement("img");
76 imgBack = document.createElement("img");
77 divblock.id = memoryBlockArr[i].id;
78 divblock.className = memoryBlockArr[i].blockCSS;
79 divblockFront.className = memoryBlockArr[i].frontCSS;
80 divblockBack.className = memoryBlockArr[i].backCSS;
81 imgFront.src = memoryBlockArr[i].frontImage;
82 imgFront.className = memoryBlockArr[i].imgCSS;
83 imgBack.src = memoryBlockArr[i].backImage;
84 imgBack.className = memoryBlockArr[i].imgCSS;
85 divblockFront.append(imgFront);
86 divblockBack.append(imgBack);
87 divblock.append(divblockFront);
88 divblock.append(divblockBack);
89 divblock.addEventListener('click', flipBlock);
90 document.getElementById("gameMainBlock").append(divblock);
91 }
92 }
93
94 function hideElements() {
95 hideBlocks = Array.from(document.getElementsByClassName('block'));
96 for (var i = 0; i < hideBlocks.length; i++) {
97 document.getElementById(hideBlocks[i].id).classList.remove('visible');
98 }
99 }
100
101 function shuffleBlocks(blocksArray) {
102 var currentIndex = blocksArray.length, temporaryValue, randomIndex;
103 // While there remain elements to shuffle...
104 while (currentIndex !== 0) {
105 // Pick an element from the remaining lot...
106 randomIndex = Math.floor(Math.random() * currentIndex);
107 currentIndex -= 1;
108 // Swap it with the current element.
109 temporaryValue = blocksArray[currentIndex];
110 blocksArray[currentIndex] = blocksArray[randomIndex];
111 blocksArray[randomIndex] = temporaryValue;
112 }
113 return blocksArray;
114 }
115
116 function flipBlock() {
117 if (gameOn === true) {
118 this.classList.add('visible');
119 flipCounter += 1;
120 document.getElementById("Flips").innerText = `Flips: ${flipCounter}`;
121
122
123 if (blockToMatch1 !== this.id) {
124 if (currentlyFlippedArr.length === 0) {
125 currentlyFlippedArr.push(this.innerHTML);
126 blockToMatch1 = this.id;
127 }
128 else if (currentlyFlippedArr.length === 1) {
129 currentlyFlippedArr.push(this.innerHTML);
130 blockToMatch2 = this.id;
131 if (currentlyFlippedArr[0] === currentlyFlippedArr[1]) {
132 blocksMatched();
133 }
134 else {
135 gameOn = false;
136 var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
137 Promise.resolve(800).then(() => wait(800)).then(() => { revertFlip(); });
138
139 }
140 }
141 }
142 }
143 }
144
145 function blocksMatched() {
146 currentlyFlippedArr = [];
147 matchedCount += 2;
148 document.getElementById(blockToMatch1).removeEventListener('click', flipBlock);
149 document.getElementById(blockToMatch2).removeEventListener('click', flipBlock);
150 if (matchedCount === memoryBlockArr.length) {
151 // if (matchedCount === 2) {
152 var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
153 Promise.resolve(1000).then(() => wait(1000)).then(() => { showWin(); });
154 }
155 }
156
157 function revertFlip() {
158 // alert(blockToMatch1 + " trying to revert " + blockToMatch2);
159 document.getElementById(blockToMatch1).classList.remove('visible');
160 document.getElementById(blockToMatch2).classList.remove('visible');
161 currentlyFlippedArr = [];
162 gameOn = true;
163 }
164
165 function showWin() {
166 hideElements();
167 gameOn = false;
168 document.getElementById('winText').classList.add('visible');
169 clearInterval(countdown);
170 }
171
172 function gameOver() {
173 // hideElements();
174 gameOn = false;
175 document.getElementById('gameOverText').classList.add('visible');
176 clearInterval(countdown);
177 }
2 var divblock, blockData, blockFrontImages, memoryBlockArr, blocksArray, blockFrontImagesAll, shuffledBlocks;
3 // for implementing flip n match logic
4 var currentlyFlippedArr, matchedCount, blockToMatch1, blockToMatch2;
5 // for implementing game info block
6 var flipCounter, timer, gameOn = false;
7
8 var overlays = Array.from(document.getElementsByClassName('overlay-text'));
9 overlays.forEach(overlay => {
10 overlay.addEventListener('click', () => {
11 overlay.classList.remove('visible');
12 resetGame();
13 init();
14
15 });
16 });
17
18 function startCountdown() {
19 return setInterval(() => {
20 this.timeRemaining--;
21 this.timer.innerText = this.timeRemaining;
22 if (this.timeRemaining === 0)
23 this.gameOver();
24 }, 1000);
25 }
26
27 function resetGame() {
28 var elements = document.getElementsByClassName("block");
29 while (elements.length > 0) {
30 elements[0].parentNode.removeChild(elements[0]);
31 }
32 }
33
34 function init() {
35 //initializing values
36 gameOn = true;
37 memoryBlockArr = new Array(18);
38 blocksArray = [];
39 blockFrontImagesAll = [];
40 shuffledBlocks = [];
41 currentlyFlippedArr = [];
42 matchedCount = 0;
43 flipCounter = 0;
44 var minutes = 2;
45 var display = document.getElementById("Timer");
46 blockFrontImages = ["Images/pokemon1.gif",
47 "Images/pokemon2.gif",
48 "Images/pokemon3.gif",
49 "Images/pokemon4.gif",
50 "Images/pokemon5.gif",
51 "Images/pokemon6.gif",
52 "Images/pokemon7.gif",
53 "Images/pokemon8.gif",
54 "Images/pokemon9.gif"];
55 // init();
56 startTimer(minutes, display);
57 blockFrontImagesAll = blockFrontImages.concat(blockFrontImages);
58 shuffledBlocks = shuffleBlocks(blockFrontImagesAll);
59 document.getElementById("Flips").innerText = `Flips: ${flipCounter}`;
60 createElements();
61 }
62
63
64
65 function createElements() {
66 var finalCount = shuffledBlocks.length;
67 for (var i = 0; i < finalCount; i++) {
68 var cardFront = shuffledBlocks.pop();
69 blockData = new MemoryBlock(i, cardFront, "Images/pokemonBack.jpg");
70 memoryBlockArr[i] = blockData;
71
72 divblock = document.createElement("div");
73 divblockFront = document.createElement("div");
74 divblockBack = document.createElement("div");
75 imgFront = document.createElement("img");
76 imgBack = document.createElement("img");
77 divblock.id = memoryBlockArr[i].id;
78 divblock.className = memoryBlockArr[i].blockCSS;
79 divblockFront.className = memoryBlockArr[i].frontCSS;
80 divblockBack.className = memoryBlockArr[i].backCSS;
81 imgFront.src = memoryBlockArr[i].frontImage;
82 imgFront.className = memoryBlockArr[i].imgCSS;
83 imgBack.src = memoryBlockArr[i].backImage;
84 imgBack.className = memoryBlockArr[i].imgCSS;
85 divblockFront.append(imgFront);
86 divblockBack.append(imgBack);
87 divblock.append(divblockFront);
88 divblock.append(divblockBack);
89 divblock.addEventListener('click', flipBlock);
90 document.getElementById("gameMainBlock").append(divblock);
91 }
92 }
93
94 function hideElements() {
95 hideBlocks = Array.from(document.getElementsByClassName('block'));
96 for (var i = 0; i < hideBlocks.length; i++) {
97 document.getElementById(hideBlocks[i].id).classList.remove('visible');
98 }
99 }
100
101 function shuffleBlocks(blocksArray) {
102 var currentIndex = blocksArray.length, temporaryValue, randomIndex;
103 // While there remain elements to shuffle...
104 while (currentIndex !== 0) {
105 // Pick an element from the remaining lot...
106 randomIndex = Math.floor(Math.random() * currentIndex);
107 currentIndex -= 1;
108 // Swap it with the current element.
109 temporaryValue = blocksArray[currentIndex];
110 blocksArray[currentIndex] = blocksArray[randomIndex];
111 blocksArray[randomIndex] = temporaryValue;
112 }
113 return blocksArray;
114 }
115
116 function flipBlock() {
117 if (gameOn === true) {
118 this.classList.add('visible');
119 flipCounter += 1;
120 document.getElementById("Flips").innerText = `Flips: ${flipCounter}`;
121
122
123 if (blockToMatch1 !== this.id) {
124 if (currentlyFlippedArr.length === 0) {
125 currentlyFlippedArr.push(this.innerHTML);
126 blockToMatch1 = this.id;
127 }
128 else if (currentlyFlippedArr.length === 1) {
129 currentlyFlippedArr.push(this.innerHTML);
130 blockToMatch2 = this.id;
131 if (currentlyFlippedArr[0] === currentlyFlippedArr[1]) {
132 blocksMatched();
133 }
134 else {
135 gameOn = false;
136 var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
137 Promise.resolve(800).then(() => wait(800)).then(() => { revertFlip(); });
138
139 }
140 }
141 }
142 }
143 }
144
145 function blocksMatched() {
146 currentlyFlippedArr = [];
147 matchedCount += 2;
148 document.getElementById(blockToMatch1).removeEventListener('click', flipBlock);
149 document.getElementById(blockToMatch2).removeEventListener('click', flipBlock);
150 if (matchedCount === memoryBlockArr.length) {
151 // if (matchedCount === 2) {
152 var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
153 Promise.resolve(1000).then(() => wait(1000)).then(() => { showWin(); });
154 }
155 }
156
157 function revertFlip() {
158 // alert(blockToMatch1 + " trying to revert " + blockToMatch2);
159 document.getElementById(blockToMatch1).classList.remove('visible');
160 document.getElementById(blockToMatch2).classList.remove('visible');
161 currentlyFlippedArr = [];
162 gameOn = true;
163 }
164
165 function showWin() {
166 hideElements();
167 gameOn = false;
168 document.getElementById('winText').classList.add('visible');
169 clearInterval(countdown);
170 }
171
172 function gameOver() {
173 // hideElements();
174 gameOn = false;
175 document.getElementById('gameOverText').classList.add('visible');
176 clearInterval(countdown);
177 }